<template>
  <div class="detail">
    <!-- 商品详情轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in goods.banner">
            <img :src="item.imageUrl" class="banner">
        </van-swipe-item>
        <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
    </van-swipe>
    <!-- 商品详情 -->
    <div>
        <div class="detail">
            <div class="price">
                <span>￥{{goods.price}}</span>
                <section>月销量:{{goods.saleNum}}</section>
            </div>
            <strong>{{goods.title}}</strong><br>
            <span>配送费：6元,满66免配送费</span><br>
            <span>温馨提示：不支持七天无理由退货</span>
        </div>
        <div class="discount">
            <button>多买优惠</button><span>第三件半价</span><br>
            <button>满减</button><span>满100件10元</span>
        </div>
    </div>
    <!-- 详情图 -->
    <img v-for="val in goods.banner" :src="val.imageUrl">
    
    <!-- 添加购物车，立即购买 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" to="/cart"/>
        <van-action-bar-button type="warning" text="加入购物车" class="cart"  @click='showPopup'/>
        <van-action-bar-button type="danger" text="立即购买" @click='showPopup'/>
    </van-action-bar>
    <van-popup
        v-model:show="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '68%' }"
        >
        <van-card
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
        <div class="goods">
            <span>商品规格</span>
            <div class="btn">
                <van-button plain type="success" size="small">500g</van-button>
                <van-button plain type="success" size="small">800g</van-button>
                <van-button plain type="success" size="small">1000g</van-button>
            </div>
        </div><br><br>
        <div class="goodsNum">
            <span>购买数量</span><br>
            <van-stepper v-model="goodsNumber" input-width="40px" button-size="32px" />
        </div><br><br>
        <van-button type="success" size="large">确认</van-button>
    </van-popup>
  </div>
</template> 

<script setup>
import {ref,onUpdated} from 'vue'
import {getDetailData} from '../../api/detail'
const show = ref(false);
const goodsNumber = ref()
const goods = ref([])
const showPopup = () => {
    show.value = true;
};
//获取详情页数据
const getDetail= async()=>{
    const res=await getDetailData()
    const {data} = res
    // console.log(data);
    goods.value = data[0]
}
getDetail() 

</script>


<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 260px;
    text-align: center;
    background-color: #39a9ed;
  }
 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0,0,0,.3);
    color: #fff;
  }
  :deep(.van-swipe-item){
    width: 100%;
    height: 323px;
  }
  .banner{
    width: 100%;
    height: 323px;
  }

/* 商品详情 */
.detail {
    padding-bottom: 16px;
    border-bottom: 10px solid #eeee;
}

/* 优惠 */
.discount{
    margin-top: 10px;
}
.discount>button{
    background: #f00 !important;
    color: #fff;
    border: none !important;
    border-radius: 4px;
    margin:0 20px 10px 10px;
}

.detail .price{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0  10px;
    box-sizing: border-box;
}
.detail .price>span{
    color: red;
    font-size: 30px;
}
.detail .price>section{
    color: #999;
}
.detail>strong{
    margin-left: 10px;
    font-size: 20px;
}
.detail>span{
    color: #999;
    font-size: 12px;
    margin-left: 10px;
}

  /* 弹出框 */
:deep(.van-card){
    margin: 50px 0 30px; 
}
.goods{
    width: 100%;
}
.goods>span{
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
    margin-left: 10px;
}
.goods .btn{
    width: 60%;
    display: flex;
    justify-content: space-around;
}
.goodsNum>span{
    display: block;
}
</style>